<template>
  <div class="course">
      <span>{{ course.id }} </span>
      <span>{{ course.name }} </span>
      <span>{{ course.credit }} </span>
  </div>
</template>

<script>
export default {
    name: 'Book' ,
    data(){
        return {
            course: { id: '01250' , name: '前端程序设计' , credit: 2 }
        }
    },
    created(){
        console.log( '- - - Course component created - - -' );
    },
    mounted(){
        console.log( '- - - Course component mounted - - -' );
    },
    unmounted(){
        console.log( '- - - Course component unmounted - - -' );
    }
}
</script>

<style>
.course {
    display: flex ;
    margin: 10px auto;
}
.course>span:first-child ,
.course>span:last-child {
    flex-basis: 150px ;
}

.course>span:nth-child(2) {
    flex-basis: 300px ;
}
</style>